<template>
  <div class="rightControls flex items-center">
    <div class="header-right-time">{{ time }}</div>
    <IconPark class="application" :size="24" type="application" color="#000" />
    <el-dropdown style="margin-left: 24px">
      <span class="el-dropdown-link">
        <el-avatar
          shape="square"
          :size="40"
          :src="imageUrl != '' ? imageUrl : squareUrl"
        />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="settings"> 设置</el-dropdown-item>
          <el-dropdown-item @click="individualCenter">个人中心</el-dropdown-item>
          <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <ScreenFull />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import IconPark from "@/components/library/IconPark.vue";
import ScreenFull from "./ScreenFull.vue";
import { useLoginStore } from "@/store/login/login";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
const login = useLoginStore();
const squareUrl = ref("https://img.js.design/assets/img/63e9b0577d776a4f5bc5e73f.png");
const { imageUrl } = storeToRefs(login);
const router = useRouter();
const time = ref("");
const timer = ref();
defineOptions({
  name: "RightControls",
});
const emit = defineEmits(["settings"]);
/**
 * 格式化给定的时间戳为指定格式的字符串。
 * @param {string} timestamp - 要格式化的时间戳。
 * @param {string} [format='YYYY-MM-DD HH:mm:ss'] - 用于生成结果字符串的格式。
 * @param {number} [offset=8] - 从原始时间戳中减去的小时偏移量。
 * @returns {string} 格式化后的日期字符串。
 */
const formatDate = (timestamp, format = "YYYY-MM-DD HH:mm:ss", offset = 8) => {
  const date = new Date(timestamp),
    // 获取年月日时分秒
    yarn = date.getFullYear().toString().padStart(4, "0"),
    month = (date.getMonth() + 1).toString().padStart(2, "0"),
    data = date.getDate().toString().padStart(2, "0"),
    day = date.getDay(),
    days = new Array("日", "一", "二", "三", "四", "五", "六"),
    hour = String(date.getHours() - offset).padStart(2, "0"),
    minute = date.getMinutes().toString().padStart(2, "0"),
    second = date.getSeconds().toString().padStart(2, "0"),
    millisecond = date.getMilliseconds().toString().padStart(3, "0");

  // 替换目标格式的字符串
  return format
    .replace("YYYY", yarn)
    .replace("MM", month)
    .replace("DD", data)
    .replace("dd", days[day])
    .replace("HH", hour)
    .replace("mm", minute)
    .replace("ss", second)
    .replace("ms", millisecond);
};
onMounted(() => {
  time.value = formatDate(new Date(), "YYYY年MM月DD日 HH:mm:ss", 0);
  timer.value = setInterval(() => {
    time.value = formatDate(new Date(), "YYYY年MM月DD日 HH:mm:ss", 0);
  }, 1000);
  login.init();
});
onUnmounted(() => {
  clearInterval(timer.value);
});
const settings = () => {
  emit("settings");
};
const individualCenter = () => {
  router.push("/individualCenter");
};
const logOut = () => {
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.application {
  margin-left: 24px;
}
:deep(.el-dropdown) {
  .el-dropdown-link {
    outline: none;
    display: flex;
    align-items: center;
  }
}
</style>
